<template>
	<view class="container">
		<head-box></head-box>
		<view class="banner">
			<image src="../../static/img/wq_banner.png" mode="widthFix"></image>
		</view>
		<view class="quan">
			<view class="quntuanListPage-main-header">
				<div class="quntuanListPage-main-title">维权</div>
			</view>
			<view class="item" @tap="getGroupUrlCb('1400337924217667585','flyz')">
				<view class="box c1">
					<text class="h2">职工维权</text>
					<text class="p1 mt">依法维护职工合法权益！</text>
					<image src="../../static/img/wqico1.png" mode=""></image>
				</view>
			</view>
			<view class="item" @tap="makEncodeURIComponentUrl('https://hz12355.com/build/index.html#/','QSNFW')">
				<view class="box c2">
					<text class="h2">青少年维权</text>
					<text class="p1 mt">代表和维护青少年合法权益！</text>
					<image src="../../static/img/wqico2.png" mode=""></image>
				</view>
			</view>
			<view class="item" @tap="getGroupUrlCbId('1419665420746522626','XZNXWQPT')">
				<view class="box c3">
					<text class="h2">妇女维权</text>
					<text class="p1 mt">代表和维护妇女合法权益！</text>
					<image src="../../static/img/wqico3.png" mode=""></image>
				</view>
			</view>
			<view class="item">
				<view class="box c4"  @tap="makEncodeURIComponentUrl('https://hzzcss.yuntrial.com/arctic/page/robot-assistant-mobile','qywq')" >
					<text class="h2">企业维权</text>
					<text class="p1 mt">维护外贸企业合法权益！</text>
					<image src="../../static/img/wqico4.png" mode=""></image>
				</view>
			</view>
		</view>

		<tabs-box></tabs-box>
	</view>
</template>

<script>
	import {getGroupUrls} from '@/api/login';
  import {encodeURIComponentUrl,indexOfencodeURIComponent} from '@/common/base'
  import {getGroupUrlCbId} from '@/common/groupUrl'
	export default{
		data(){
			return {
				current: 0,
				indicatorDots: false,
				autoplay: true,
				interval: 3000,
				duration: 500,
				circular: true,
				frontPhone:'057185811959',
			}
		},
		onLoad() {

		},
		onReady() {

		},
    onShow(){
      // #ifdef H5
      console.log('分享')
      this.$wxSetShare()
      // #endif
    },
		methods: {
      //跳转不同的分组url的id
      getGroupUrlCbId(id,sceneCode){
        this.$clickGpScenePv(sceneCode)
        return getGroupUrlCbId(id)
      },
			change(e){
				// console.log(e.detail.current)
				this.current = e.detail.current
			},
      //青少年页面跳转
      makEncodeURIComponentUrl(url,sceneCode){
        this.$clickGpScenePv(sceneCode)
        return encodeURIComponentUrl(url)
			},
      //跳转不同的分类
      getGroupUrlCb(id,sceneCode)
			{
        this.$clickGpScenePv(sceneCode)
        getGroupUrls(id).then(res => {
          if(res.success) {
            const url = res.result;
            return url.hasOwnProperty('url')? indexOfencodeURIComponent(url):indexOfencodeURIComponent(url[id])
          }
				});
			},
			//https://app.hzgh.org:58002/unionApp/module/unionH5/flyz/index.html#/legal/legal
		}
	}
</script>

<style lang="stylus" scoped>
	.container
		box-sizing border-box
		min-height 100vh;
	.top
		height 100rpx
		background-color #007AFF
		display flex
		justify-content space-between
		padding 0 30rpx
		align-items center
		image
			width 22rpx
			height 40rpx
		.h2
			color #fff
			font-size 30rpx
	.banner
	{
		width 100%;
		padding 30rpx 30rpx 0 30rpx;
		image{
			width 100%
			border-radius 10rpx;
		}
	}
	.quntuanListPage-main-title{

		font-size: 32rpx;
		color: #333;
		font-weight: 600;
		border-left: 6rpx solid #0071fc;
		padding-left: 20rpx;
		margin-left 30rpx;
	}
	.quan
		float left
		width 100%
		padding-top 40rpx
		height 1100rpx
		.item
			float left
			width 100%
			display flex
			margin-top 27rpx
			padding 0 30rpx
			.box
				flex 1 1 auto
				position relative
				padding 20rpx 20rpx
				border-radius 10rpx
				width 50%
				min-height :180rpx
				.h2
					font-size 34rpx
					padding-left 30rpx
					font-weight bold
					opacity 0.8
				.p1
					display block
					font-size 26rpx
					color #333333
					margin-top 6rpx
					width 80%
					line-height 40rpx
					padding-left 30rpx
					opacity 0.5
					&.mt
						margin-top 34rpx
				image
					position absolute
					right 60rpx
					bottom 20rpx
					width 150rpx
					height 150rpx
				&.c1
					background-image linear-gradient(left, #becfff, #becfff)
				&.c2
					background-image linear-gradient(left, #8be3d2, #b6e9df)
				&.c3
					background-image linear-gradient(left, #ffc6d1, #ffe1e7)
				&.c4
					background-image linear-gradient(left, #fdf4a6, #fffad2)


</style>
